<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div id="app">
        <button id="login" @click="login">Login</button>
        <button id="api" @click="callApi">Call API</button>
        <button id="logout" @click="logout">Logout</button>
        <!-- 显示日志，包含登入、登出和请求API结果 -->
        <pre id="results">{{results}}</pre>
    </div>
    <script src="./js/oidc-client.js"></script>
    <script src="js/vue.js"></script>
    <!-- <script src="./js/app.js"></script> -->
    <script>
        var vm = new Vue({
            el: "#app",
            created() {
                // 根据配置信息创建用户管理对象，后续直接使用
                this.mgr = new Oidc.UserManager(this.config);
            },
            mounted() {
                // 这里要注意this的使用
                var that = this;
                this.mgr.getUser().then(function(user) {
                    if (user) { // 判断是否登录成功
                        that.log("User logged in", user.profile);
                    } else { // 没登录
                        that.log("User not logged in");
                    }
                });
            },
            data: {
                // 客户端配置
                config: {
                    authority: "http://localhost:6100",
                    client_id: "JsClient",
                    redirect_uri: "http://localhost:8080/callback.html",
                    response_type: "id_token token",
                    scope: "openid profile orderApi", //客户端需要的权限范围 
                    post_logout_redirect_uri: "http://localhost:8080/index.html",
                },
                mgr: null, //登录对象
                results: "" //登录通过数据
            },
            methods: {
                // 登录
                login: function() {
                    console.log("login");
                    this.mgr.signinRedirect();
                },
                callApi: function() {
                    console.log("CallAPI");
                    var that = this;
                    // 先判断是否登录，登录之后在去调用API
                    this.mgr.getUser().then(function(user) {
                        var url = "http://localhost:5000/api/Order";
                        // 这里使用原生异步请求，就是引入第三方ajax库啦
                        var xhr = new XMLHttpRequest();

                        xhr.open("GET", url);
                        xhr.onload = function() {
                            // 显示请求API获取到的数据
                            that.log(xhr.status, JSON.parse(xhr.responseText));
                        };
                        xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
                        // 发送请求
                        xhr.send();
                    });
                },
                logout: function() {
                    console.log("logout");
                    // 登出
                    this.mgr.signoutRedirect();
                },
                // 将信息展示
                log: function() {
                    var that = this;
                    Array.prototype.forEach.call(arguments, function(msg) {
                        if (msg instanceof Error) {
                            msg = "Error: " + msg.message;
                        } else if (typeof msg !== 'string') {
                            msg = JSON.stringify(msg, null, 2);
                        }
                        that.results = msg + '\r\n';
                    });
                }
            }
        });
    </script>
</body>

</html>